<template>
	<a-form-item
	:label="labelName"
	:name="name"
	:rules="rules">
		<div class="checkMember">
			<div class="datalist" v-if="isRead">
				<p v-for="item in hhgMixMember" :key="item.id"
					:class="[item.selected ? 'currentPItem' : '']">{{ item.displayName }}</p>
			</div>
			<div class="datalist" v-else>
				<p v-for="(item, index) in hhgMixMember" :key="item.id"
					@click="selectListItemfn(item, $event, hhgMixMember)"
					@mousedown="startSelectionfn($event, index, hhgMixMember)"
					@mouseover="continueSelectionfn($event, index, hhgMixMember)"
					@mouseup="endSelectionfn($event)"
					:class="[item.selected ? 'currentPItem' : '']">{{ item.displayName }}</p>
			</div>
			<div class="big" @click="memberFn" v-if="!isRead"></div>
			<div class="close" @click="removeFn" v-if="!isRead"></div>
		</div>
	</a-form-item>
	<a-modal centered :width="690" v-model:visible="visible" bodyStyle="padding:0" :footer="null" ref="modalRef" :wrap-style="{ overflow: 'hidden' }">
		<SelectMember :list="hhgList" @selectedMember="selectedMember" @fuzzySearch="fuzzySearch" @closeModal="memberFn" @selectLetters="selectLetters" @clearList="clearMebmer" @SwitchTab="SwitchTab" :config="{
			options, multiple: true, list: hhgList, displayList: hhgDisplayList//1-返回人员姓名+人员code  2-返回人员姓名+人员code + 返回单个数据流,multiple-false是单选true是多选
		}"/>
		<!-- 拖动 -->
		<template #title>
			<div ref="modalTitleRef" style="width: 100%; cursor: move">选择成员</div>
		</template>
		<template #modalRender="{ originVNode }">
			<div :style="transformStyle">
				<component :is="originVNode" />
			</div>
		</template>
	</a-modal>
</template>

<script setup>
import { onMounted, defineProps, defineAsyncComponent, ref, defineEmits, watch, watchEffect, computed, nextTick } from 'vue'
import { message } from 'ant-design-vue'
import { selectListItem, startSelection, endSelection, continueSelection, deepClone, EventBus } from './utils'
import _ from 'lodash'
//拖动
import { useDraggable } from '@vueuse/core'

const SelectMember = defineAsyncComponent(() =>
  import('./hhg-mixedModal')
)
//父组件传过来的值
const props = defineProps({
  config: {
	type: Object,
	default: ()=> {}
  },
  list: {
	type: Array,
	default: () => [],
	require: false
  }
})
const hhgList =ref([])
const hhgMixMember = ref([])
const hhgDisplayList = ref([])
watch(() => props.list, (val) => {
  if (!_.isEmpty(val)) {
	hhgList.value = val
  }
}, { immediate: true }, { deep: true })
watch(() => props.config, (val) => {
	if (val.displayList.length !== 0) {
		hhgDisplayList.value = val.displayList
		console.log('val.mixMember', val.mixMember.length)
	}
	if (val.mixMember.length === 0) {
		hhgMixMember.value = val.displayList
	} else {
		hhgMixMember.value = val.mixMember
	}
}, { immediate: true }, { deep: true })
const emit = defineEmits(['selectedMember', 'closeModal', 'selectLetters', 'fuzzySearch', 'removeFn', 'SwitchTab', 'onClickPopupRadioMixed'])

const labelName = ref(props.config.labelName)
const name = ref(props.config.name)
const rules = ref(props.config.rules)
const isRead = ref(null)
const options = ref(props.config.options)
watch(() => props.config.isRead, (val) => {
  if (val) {
	isRead.value = val
  }
}, { immediate: true }, { deep: true })

const visible = ref(false)
const memberFn = ()=> {
	visible.value = !visible.value
	if (visible.value) {
		setTimeout(() => {
			const data = deepClone(hhgMixMember.value.map(i=> {
				i.selected = false
				return i
			}))
			EventBus.emit('radioMixedPopup', data)
			emit('onClickPopupRadioMixed')	
		}, 10)
	}
	emit('popMixedMember')
}

const fuzzySearch = (type, data)=> {
	options.value = type
	emit('fuzzySearch', type, data)
}
const SwitchTab = type=> {
	emit('SwitchTab', type)
}
const selectedMember = async (value)=> {
	hhgMixMember.value = [...value.data]
	await nextTick()
	visible.value = !visible.value
	emit('selectedMember', value)
}
const removeFn = ()=> {
	if (isRead.value) return
	if (hhgMixMember.value.filter(item => item.selected).length === 0) {
		message.warning('请至少选择一种删除项.')
		return
	}
	const data = deepClone(hhgMixMember.value.filter(item => !item.selected))
	hhgMixMember.value = data
	emit('removeFn', hhgMixMember.value)
}
const clearMebmer = ()=> {
	hhgMixMember.value = []
	emit('clearMixedMebmer')
	memberFn()
}
const selectLetters = (type, data)=> {
	options.value = type
	emit('fuzzySearch', options.value ,data)
}
//多选人员设置
const selectListItemfn = (item, event, list)=> {
	return selectListItem(item, event, list)
}
const startSelectionfn = (event, index, list)=> {
	return startSelection(event, index, list)
}
const endSelectionfn = (event)=> {
	return endSelection(event)
}
const continueSelectionfn = (event, index, list)=> {
	return continueSelection(event, index, list)
}
//拖动
const modalTitleRef = ref(null)
const { x, y, isDragging } = useDraggable(modalTitleRef)
const startX = ref(0)
const startY = ref(0)
const startedDrag = ref(false)
const transformX = ref(0)
const transformY = ref(0)
const preTransformX = ref(0)
const preTransformY = ref(0)
const dragRect = ref({
	left: 0,
	right: 0,
	top: 0,
	bottom: 0
})
watch([x, y], () => {
	if (!startedDrag.value) {
		startX.value = x.value
		startY.value = y.value
		const bodyRect = document.body.getBoundingClientRect()
		const titleRect = modalTitleRef.value.getBoundingClientRect()
		dragRect.value.right = bodyRect.width - titleRect.width
		dragRect.value.bottom = bodyRect.height - titleRect.height
		preTransformX.value = transformX.value
		preTransformY.value = transformY.value
	}
	startedDrag.value = true
})
watch(isDragging, () => {
	if (!isDragging) {
		startedDrag.value = false
	}
})
watchEffect(() => {
	if (startedDrag.value) {
		transformX.value =
			preTransformX.value +
			Math.min(Math.max(dragRect.value.left, x.value), dragRect.value.right) -
			startX.value;
		transformY.value =
			preTransformY.value +
			Math.min(Math.max(dragRect.value.top, y.value), dragRect.value.bottom) -
			startY.value
	}
})
const transformStyle = computed(() => {
	return {
		transform: `translate(${transformX.value}px, ${transformY.value}px)`
	}
})

// mounted
onMounted(() => {
	// hhgMixMember.value = deepClone(hhgDisplayList.value)
})

</script>
<style scoped lang="scss"></style>